<template>
  <!-- 头部搜索框 -->
  <div class="common-layout">
    <el-form class="serchBox">
      <el-row :gutter="50">
        <el-col :span="6">
          <el-form-item label="活动编号">
            <el-input placeholder="请输入" v-model="pageParams.number" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" >
          <el-form-item label="渠道来源" >
            <el-select placeholder="" v-model="pageParams.channel" >
              <el-option  v-for="item in typelist" :key="item.id" :value="item.content" >{{
                item.content
              }}</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建日期" >
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              value-format="YYYY-MM-DD"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动日期">
            <el-date-picker
            value-format="YYYY-MM-DD"
              v-model="value2"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <div style="margin-bottom: 10px; margin-left: 1150px">
        <el-button class="iptSerch" @click="iptSerch">搜索</el-button>
        <el-button class="iptZC" @click="iptClear">重置</el-button>
      </div>
    </el-form>
  </div>
  <!-- 添加按钮 -->
  <div class="addipt">
    <el-button class="addbtn" @click="addAtv">+创建活动</el-button>
  </div>
  <!-- 课程表单 -->
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="number" label="活动编号" width="200" />
    <el-table-column prop="channel" label="渠道来源" width="150" />
    <el-table-column prop="introduction" label="活动简介" width="250" />
    <el-table-column prop="type" label="活动明细" width="200" />
    <el-table-column prop="createTime" label="开始时间" width="200" />
    <el-table-column prop="endTime" label="结束时间" width="220" />
    <el-table-column prope="" label="操作" width="150">
        <template #default="scope">
          <el-button
            style="color: #05cc95"
            type="text"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-button>
          <el-popconfirm title="确认删除该数据?" @confirm="handleConfirm(scope.$index, scope.row)">
            <template #reference>
              <el-button
                style="color: #fd7065"
                size="mini"
                type="text"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParams.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageParams.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="listtotal"
      style="margin-left: 25%"
    >
    </el-pagination>
  <!-- 创建活动 -->
  <add-activity
    ref="refForm"
    :crowdIpt="crowdIpt"
    :disciplineIpt="disciplineIpt"
    @add-addList="getactivity"
  ></add-activity>
</template>

<script setup>
import addActivity from './add-activity.vue'
import { ref, onMounted } from 'vue'
import { getactivityList } from '@/api/activity'
const value1 = ref('')
const value2 = ref('')
const handleSizeChange = (index)=>{
console.log(index);
pageParams.value.size = index
getactivity()
}
const handleCurrentChange = (index)=>{
console.log(index);
pageParams.value.page = index
getactivity()
}
const handleSelectionChange = (val) => {
  console.log(val)
}
//表格数据
const tableData = ref([])
const pageParams = ref({
  page: 1,
  size: 10,
  number: '',
  channel: '',
  createBeginTime:value1.value[0],
  createEndTime:value1.value[1],
  beginTime:'',
  endTime:'',
})
const listtotal = ref(0)
// 创建活动
const refForm = ref(null)
const addAtv = () => {
  refForm.value.dialogStatus()
}
const iptSerch = async () => {
 await getactivity()
}
const iptClear =async () => {
  pageParams.value = {
  page: 1,
  size: 10,
  number: '',
  channel: '',
  createBeginTime:'',
  createEndTime:'',
  beginTime:'',
  endTime:'',
  }
  await getactivity()
}
onMounted(() => {
  getactivity()
})
const typelist = ref([])
// 获取分页数据
const getactivity = async () => {
  const { data, total } = await getactivityList(pageParams.value)
  tableData.value = data
  listtotal.value = total
  typelist.value = refForm.value.channellist
  console.log(typelist.value)
}
</script>

<style scoped>
::v-deep .el-input__wrapper{
  width: 280px;
  height: 40px;
  background-color: #f3f3f3;
}
.common-layout {
  background-color: #fff;
  padding: 24px 0 0 20px;
}
.serchBox {
  display: flex;
  flex-wrap: wrap;
}
.iptSerch {
  width: 94px;
  height: 40px;
  border-radius: 20px;
  background-color: #00cd95;
  color: #fff;
}
.iptZC {
  width: 94px;
  height: 40px;
  border-radius: 20px;
  color: #333;
  background-color: #eaeaea;
}
.addbtn {
  width: 110px;
  height: 40px;
  border-radius: 20px;
  margin-left: 20px;
  background-color: #fe7068;
  color: #fff;
}
.el-form-item {
  display: block;
}
.el-input {
  width: 263px;
  height: 40px;
  margin-right: 44px;
}
.el-option {
  height: 40px;
}
.addipt {
  height: 83px;
  background-color: #f9f9f9;
  line-height: 83px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg { 
  padding: 10px 0;
  background-color: #f9fafc;
}

</style>
